<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap {
        width: 80%;
        display: flex;
        justify-content: center;
        margin: 50px auto;
        height: 80vh;
      }
      .source {
        width: 140px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-evenly;
        background-color: rgb(218, 232, 248);
        height: 70%;
        margin-right: 20px;
        border-radius: 4px;
      }
      .source .item {
        width: 100px;
        height: 45px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        line-height: 45px;
      }
      table {
        padding: 5px;
        border: 2px solid #558af3;
        background-color: rgb(218, 232, 248);
        border-radius: 4px;
        text-align: center;
        height: 70%;
      }
      tbody {
        margin-top: 10px;
      }
      tbody:nth-child(3)::before {
        content: "";
        display: block;
        height: 1px;
      }
      td,
      th {
        width: 120px;
        height: 50px;
        border: 1px solid #558af3;
        border-radius: 4px;
        box-shadow: 2px 2px #558af3;
      }
      td .item {
        width: 100px;
        height: 45px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        line-height: 45px;
        margin: auto;
      }
      .drop-over {
        background-color: #827676 !important;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="source" data-drop="move">
        <div
          class="item"
          draggable="true"
          style="background-color: #a41ed1"
          data-drop="copy"
        >
          语文
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #d53b14"
          data-drop="copy"
        >
          数学
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #1cc00a"
          data-drop="copy"
        >
          英语
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #f3eb55"
          data-drop="copy"
        >
          政治
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #e1a50c"
          data-drop="copy"
        >
          历史
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #558af3"
          data-drop="copy"
        >
          化学
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #16dab6"
          data-drop="copy"
        >
          物理
        </div>
        <div
          class="item"
          draggable="true"
          style="background-color: #170ac7"
          data-drop="copy"
        >
          体育
        </div>
      </div>
      <table cellspacing="4px">
        <thead>
          <th></th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </thead>
        <tbody>
          <tr>
            <td rowspan="4">上午</td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
        </tbody>

        <tbody>
          <tr>
            <td rowspan="4">下午</td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
          <tr>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
            <td data-drop="copy"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./drop.js"></script>
  </body>
</html>
